<template>
	<view class="set_wrap">
		<view class="status_bar" style="height: 30px"></view>
		<view class="content">
			<view class="list_item" @tap='changeFunc("1")'>
				<view class="list_item_title">
					头像
				</view>
				<view class="list_item_info">
					<img :src="customerInfo.avatar">
				</view>
				<view class="list_item_icon">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			
			<view class="list_item" @tap='changeFunc(2)'>
				<view class="list_item_title">
					昵称
				</view>
				<view class="list_item_info">
					<span >{{customerInfo.nickname}}</span>
				</view>
				<view class="list_item_icon">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			
			<view class="list_item" @tap='changeFunc(item.id)'>
				<view class="list_item_title">
					手机号
				</view>
				<view class="list_item_info">
					<span >{{customerInfo.phone}}</span>
				</view>
				<view class="list_item_icon">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			
			<view class="list_item" @tap='changeFunc(item.id)' v-for="item in setList" :key="item.id">
				<view class="list_item_title">
					{{item.title}}
				</view>
				<view class="list_item_info">
					<view class="list_item_state">
						<u-icon size="14px" v-if="item.state === 1" color="green" name="checkmark-circle-fill"></u-icon>
						<u-icon size="14px" v-if="item.state === 0" color="red" name="info"></u-icon>
					</view>
					<img v-if="item.type == 'img'" src="../../../static/images/logo.png">
					<span v-else>{{item.info}}</span>
				</view>
				<view class="list_item_icon">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			
			<u-modal :show="exitShow" @cancel="exitShow = false" @confirm="exit" :showCancelButton="true"
				confirmColor="var(--echo-main-color)" title="退出登录" content="确认退出?"></u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customerInfo: {},
				exitShow: false,
				setList: [
				{
					id: '4',
					title: '交易密码',
					info: '未设置',
					state: 0,
				}, 
				{
					id: '5',
					title: '实名认证',
					info: '未认证',
					state: 0,
				}, 
				{
					id: '6',
					title: '关于我们',
					info: '',
				}, 
				{
					id: '7',
					title: '系统版本',
					info: '0.0.1',
				}, 
				{
					id: '8',
					title: '退出登录',
					info: '',
				}]
			}
		},
		onShow() {
			this.customerInfo = uni.getStorageSync('customerInfo');
			console.log(this.customerInfo)
		},
		methods: {
			// 退出
			exit() {
				// 清除缓存
				uni.clearStorageSync();
				uni.switchTab({
					url: "/pages/My/My"
				})
			},
			changeFunc(id) {
				console.log(id)
				switch (id) {
					case '1':
						uni.navigateTo({
							url: "/pages/My/mySetting/AvatarSetting"
						})
						break;
					case '4':
						uni.navigateTo({
							url: "/pages/My/mySetting/transactionPassword"
						})
						break;
					case '5':
						uni.navigateTo({
							url: "/pages/My/mySetting/identityVerification"
						})
						break;
					case '8':
						this.exitShow = true
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.set_wrap {
		min-height: 100vh;
		background-color: var(--echo-main-page-bg-color);

		.content {
			margin: 120rpx 30rpx 30rpx 30rpx;
		}
	}
	
	.list_item {
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 20rpx;
		border-radius: 12rpx;
		position: relative;
		.list_item_info {
			position: absolute;
			top: 50%;
			right: 60rpx;
			transform: translateY(-50%);
			.list_item_state {
				display: inline-block;
				margin-right: 6rpx;
			}
			img {
				margin-top: 40rpx;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			span {
				color: #666;
			}
		}
		.list_item_icon {
			position: absolute;
			top: 50%;
			right: 20rpx;
			transform: translateY(-50%);
		}
	}
</style>
